<style>
  header {
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 20px;
  }

  .tabList li {
    padding: 0 15px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
  }

  .currentTab {
    border-bottom: 3px solid #565e99 !important;
    color: #565e99;
  }

  .table-header {
    width: 960px;
    height: 40px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(234, 234, 234, 1) 100%);
    display: flex;
    font-size: 14px;
    color: #A5AAB7;
  }

  .table-type-default .table-main-row {
    width: 960px;
    display: flex;
    border: 1px solid #E8E5E2;
    border-top: none;
  }

  .table-type-default .table-main-row span {
    padding: 0 5px;
  }

  .table-type-default .table-header li {
    text-align: center;
    line-height: 40px;

  }

  .table-type-default .table-main-row li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #E8E5E2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
  }

  .table-type-default .table-main-row li:last-child {
    border-right: none;
  }

  .section_title {
    color: #929ba8;
    font-size: 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }

  .section_detail {
    padding: 24px;
  }

  .clo-detail-2 {
    display: flex;
    margin-bottom: 16px;
  }

  .clo-detail-2 li {
    width: 360px;
    color: #999;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .clo-detail-2,
  .clo-detail-1 {
    color: #999;
  }

  .mark-yuce {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuce-contains {
    width: 615px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .yuce-contains .title {
    line-height: 45px;
    text-align: center;
    height: 45px;
  }

  .yuce-contains .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
  }

  .yuce-orge {
    background-color: #f2f2f2;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .newAdd .house-sharing-text span {
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .flex-container {
    display: flex;
    align-items: center;
    position: relative;
  }

  .flex-container input {
    width: 240px;
    height: 34px;
    text-indent: 8px;
    color: #333;
  }

  .entry-style {
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
    outline: none;
  }

  textarea {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 8px;
    color: #333;
  }

  .orge-footer {
    padding: 8px 0;
  }

  .unit-text {
    position: absolute;
    top: 7px;
    right: -18px;
  }

  .color666 {
    color: #666
  }

  .floorNum {
    display: flex;
    height: 40px;
    padding: 0 5px;
    border-bottom: 1px solid #E8E5E2;
  }

  .table-main-row .floorNum:last-child {
    border-bottom: none
  }

  .unit-table {
    border: 1px solid #e5e5e5;
    border-bottom: none;
  }
</style>
<main id="turnoverDetail" style="padding-bottom:100px">
  <header class="dy-flex border-b" style="background:#f7f7f7">
    <ul class="font-16 dy-flex tabList">
      <li v-for="item in  tabList" :class="{'currentTab':currentTab == item.name}" @click="switchTab(item.name)">
        {{item.name}}</li>
    </ul>
    <span class="font-14 color-999">营业额管理-营业额详情</span>
  </header>
  <section class="section_detail">
    <div class="section_title">主要信息</div>
    <div class="table-type-default">
      <ul class="table-header">
        <li style="width:136px">营业日期</li>
        <li style="width:118px">金额</li>
        <li :style="{width:data.statusCode == 'YTJ'?'704px':'581px'}">备注</li>
        <li style="width:122px" v-if="data.statusCode != 'YTJ'">操作</li>
      </ul>
      <ul class="table-main-row">
        <li style="width:136px">{{data.turnoverDate | formatDate}}</li>
        <li style="width:118px">{{data.turnoverAmount || '--'}}</li>
        <li :style="{width:data.statusCode == 'YTJ'?'704px':'581px'}">{{data.memo || '--'}}</li>
        <li style="width:122px;color:#476799;cursor: pointer;" @click="updateBut"
          v-if="data.statusCode != 'YTJ' && data.statusCode == 'WIPT'"  v-show="permissions.indexOf('c311') > -1">录入</li>
        <li style="width:122px;color:#476799;cursor: pointer;" @click="updateBut"
          v-if="data.statusCode != 'YTJ' && data.statusCode == 'YIPT'">修改</li>
      </ul>
    </div>
    <div class="section_title" style="margin:30px 0 20px 0">客户信息</div>
    <ul class="clo-detail-2">
      <li><span>客户名称：<span class="color666">{{customerDetail.name}}</span></span></li>
      <li><span>客户类型：<span class="color666">{{customerDetail.customerStateVal}}</span></span></li>
    </ul>
    <ul class="clo-detail-2">
      <li><span>简称：<span class="color666">{{customerDetail.shortName || '--'}}</span></span></li>
      <li><span>所属行业：<span class="color666">{{customerDetail.industryVal || '--'}}</span></span></li>
    </ul>
    <ul class="clo-detail-2">
      <li><span>纳税人识别号：<span class="color666">{{customerDetail.idcode || '--'}}</span></span></li>
      <li><span>公司邮箱：<span class="color666">{{customerDetail.email || '--'}}</span></span></li>
    </ul>
    <ul class="clo-detail-2">
      <li><span>联系人：<span class="color666">{{customerDetail.lperson || '--'}} <span
              style="margin-right:10px;"></span>{{customerDetail.phone}}</span></span></li>
      <li><span>邮编：<span class="color666">{{customerDetail.zipcode || '--'}}</span></span></li>
    </ul>
    <ul class="clo-detail-1">
      <span>通讯地址：<span class="color666">{{customerDetail.address || '--'}}</span></span>
    </ul>
    <!-- 出租资源 -->
    <div>
      <h3 class="section_title">出租资源</h3>
      <!-- 单元 -->
      <div v-if="building.length">
        <div class="hl-34 mr-10">单元({{totalArea | formatNum}}m²)</div>
        <div class="unit-table">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-2">项目</div>
            <div class="dy-fx-2">楼栋</div>
            <div class="dy-fx-1">楼层</div>
            <div class="dy-fx-4">单元</div>
          </div>
          <div class="tb-content">
            <ul class="dy-flex project-cr">
              <li class="dy-fx-2 project">{{projectName}}</li>
              <li class="dy-fx-7">
                <!-- 楼栋 -->
                <ul class="dy-flex building-cr" v-for="(item,index) in building">
                  <li class="dy-fx-2 building">{{item.buildingName}}</li>
                  <li class="dy-fx-5">
                    <!-- 楼层 -->
                    <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                      <li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
                      <li class="dy-fx-4 unit">
                        <!-- 单元 -->
                        <b v-for="(item2,index2) in item1.unit" @click="getUnitDetails(item1.unitId[index2])"><a
                            href="javascript:;">{{item2}}</a><i v-if="index2 + 1 !== item1.unit.length">、</i></b>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <div class="mark-yuce newAdd" v-if="isUpdate">
      <div class="yuce-contains" style="width:500px;">
        <div class="title">修改营业额</div>
        <div class="close" @click="isUpdate = false">x</div>
        <div class="yuce-orge" style="padding-top:26px">
          <div class="flex-container">
            <span class="title-S">金额：</span>
            <div style="width: 240px;margin-right:0" class="flex-container relative">
              <input type="number" class="form-control ct-number-ipt" v-model='updateData.turnoverAmount'  @input="updateData.turnoverAmount = updateData.turnoverAmount.slice(0,12)">
              <span class="unit-text">元</span>
            </div>
          </div>
          <div class="flex-container" style="margin-top:12px;align-items: flex-start">
            <span class="title-S">备注：</span>
            <div style="width: 240px;margin-right:0" class="flex-container relative">
              <textarea placeholder="非必填" class="form-control contract-memo-textarea" style="width: 260px;height: 90px;" v-model="updateData.memo"></textarea>
            </div>
          </div>
        </div>
        <div class="orge-footer text-center">
          <button type="button" class="btn n-btn-primary" style="width:90px;min-width:80px;margin-right:120px"
            @click="updateTurnoverInfo">确认修改</button>
          <button type="button" class="btn n-btn-outline" @click="isUpdate = false">取消</button>
        </div>
      </div>
    </div>
     <!-- 单元详情 -->
     <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
  </section>

</main>
<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contract/scripts/turnover_detail.js" charset="utf-8"></script>
<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>